<template>
  <div class="cinema-detail-container">
    <Header v-if="currentCinemaInfo" :info="currentCinemaInfo"></Header>
    <Films v-if="currentFilmList.length > 0" :list="currentFilmList" v-model="currentFilmId" @onchange="onChangeFilmId">
    </Films>
    <Filter v-if="timeList.length > 0" :data="timeList" @onChanged="onTimeChanged"></Filter>
    <div class="list-container" v-if="arrangementList.length > 0">
      <Item :info="item" v-for="(item, index) in arrangementList" :key="index"></Item>
    </div>
  </div>
</template>
<script lang="ts" setup>
import Header from "./header.vue";
import Films from "./films.vue";
import Item from "./item.vue";
import Filter from "./filter.vue";
import * as cinemaApi from "../../api/cinema";
import { onMounted, reactive, ref, watch } from "vue";
import Taro from "@tarojs/taro";
const router = Taro.useRouter();
const currentFilmId: any = ref(null);
const currentCinemaId: any = ref(null);
const currentCinemaInfo: any = ref(null);
const currentFilmList: any = ref([]);
const arrangementList: any = ref([]);
const timeList = ref([]);
const filterInfo = reactive({
  date: "",
});
const onChangeFilmId = (id) => {
  currentFilmId.value = id;
};
onMounted(() => {
  currentFilmId.value = Number(router.params.film_id);
  console.log(currentFilmId.value);
  currentCinemaId.value = router.params.cinema_id;
  getCinemaDetailData();
});
watch(currentFilmId, () => {
  timeList.value = [];
  getTimesData();
});

const onTimeChanged = (data) => {
  const { time } = data;
  filterInfo.date = time;
  arrangementList.value = [];
  getArrangementList();
};
const getCinemaDetailData = async () => {
  const cinemaid = currentCinemaId.value;
  const res: any = await cinemaApi.detail({ cinemaid });
  currentCinemaInfo.value = res["cinema_info"];
  currentFilmList.value = res["film_list"];
  initCurrentFilmId();
};
const initCurrentFilmId = () => {
  if (currentFilmId.value) {
    return false;
  }
  if (currentFilmList.value.length > 0) {
    currentFilmId.value = currentFilmList.value[0].film_id;
  }
  getTimesData();
};
const getTimesData = async () => {
  Taro.showLoading({
    title: "加载排片日期",
  });
  const cinemaid = currentCinemaId.value;
  const film_id = currentFilmId.value;
  try {
    const res: any = await cinemaApi.arrangement({ cinemaid, film_id });
    console.log(res, "时间");

    timeList.value = res.dates;
    Taro.hideLoading();
  } catch (error) {
    console.log(error);
    Taro.hideLoading();
  }
};
const getArrangementList = async () => {
  Taro.showLoading({
    title: "加载场次列表",
  });
  const cinemaid = currentCinemaId.value;
  const film_id = currentFilmId.value;
  const date = filterInfo?.date;
  const res: any = await cinemaApi.arrangement({ cinemaid, film_id, date });
  console.log(res, "数组");
  if (!res.show_list) {
    arrangementList.value = [];
    return;
  }
  arrangementList.value = res.show_list;
  Taro.hideLoading();
};
</script>
<style lang="scss">
.cinema-detail-container {
  display: flex;
  flex-direction: column;

  .list-container {
    padding: 0 25px;

    .cinema-detail-item-container {
      .nut-cell {
        margin-bottom: 0;
      }
    }

    .cinema-detail-item-container:nth-last-child(1) {
      .nut-cell {
        margin-bottom: 20px;
      }
    }
  }
}
</style>
